<template>
  <div class="hello">
	<h1>Form Validation Example</h1>
	<div class="row">
		<form class="form-horizontal">
			<div class="form-group" v-bind:class="{ 'has-error': $v.form.password.$error }">
				<label class="control-label col-sm-2" for="inputSuccess1">Password</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model.trim="form.password" @input="$v.form.password.$touch()">
					<span v-if="!$v.form.password.required && $v.form.password.$dirty" class="help-block">Password is required</span>
					<span v-if="!$v.form.password.minLength" class="help-block">Password min length {{ $v.form.password.$params.minLength.min }}</span>
				</div>
			</div>
			<div class="form-group" v-bind:class="{ 'has-error': $v.form.repeatPassword.$error }">
				<label class="control-label col-sm-2" for="inputSuccess1">Repeat Password</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model.trim="form.repeatPassword" @input="$v.form.repeatPassword.$touch()">
					<span v-if="!$v.form.repeatPassword.sameAsPassword" class="help-block">Password must be the same</span>
				</div>
			</div>
			<div class="has-success form-group">
				<div class="checkbox col-sm-10 col-sm-offset-2">
					<label>
						<input type="checkbox" id="checkboxSuccess" value="option1">
						Checkbox with success
					</label>
				</div>
			</div>
			<input type="button" name="submit" value="Submit" class="btn btn-primary" @click="submitForm()"/>
		</form>
	</div>
  </div>
</template>

<script>
import { required, sameAs, minLength } from 'vuelidate/lib/validators';

export default {
	name: 'task-progress',
	data () {
		return {
			msg: 'Welcome to Your Vue.js App',
			checked: true,
			activeName: 'second',
			form: {
				password: '',
				repeatPassword: ''
			}
		};
	},
	validations: {
		form: {
			password: {
				required,
				minLength: minLength(6)
			},
			repeatPassword: {
				sameAsPassword: sameAs('password')
			}
		}
	},
	methods: {
		handleClick (tab, event) {
			console.log(tab, event);
		},
		submitForm () {
			if (this.$v.form.$invalid) {
				this.$v.$touch();
			} else {
				console.log('OK submit....');
			}
		}
	},
	beforeRouteEnter (to, from, next) {
		console.log('enter task progress....');
		next();
	},
	beforeRouteUpdate (to, from, next) {
		console.log('update task progress....');
		next();
	},
	beforeRouteLeave (to, from, next) {
		console.log('leave task progress....');
		next();
	}
};
</script>

